<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- v-model一个vue的指令，放在标签里面 -->
    <input v-model="msg" type="text">
    <!-- 双花括号，表示变量 -->
    <!-- 正式名称：文本插值，放在标签之间 -->
    <span>{{msg}}</span>
    <hr>
    <p>v-text指令:显示文本内容</p>
    <p v-text="msg"></p>
    <hr>
    <p>v-html指令:显示带有标签和样式的文本内容</p>
    <p v-html="msg1"></p>
    <hr>
    <p>v-bind指令：绑定标签属性，使属性值成为一个变量</p>
    <p>:是v-bind的语法糖形式</p>
    <input v-bind:type="type1" v-bind:sss="type2">
    <hr>
    <p>v-if指令：条件判断，满足条件时才会显示这个标签，通过操作标签实现显示隐藏</p>
    <p>v-else指令：不能单独出现，要和v-if一起使用。用来表示条件不成立时的情况</p>
    <p v-if="num1>num2">你好</p>
    <p v-if="isLogin">马云</p>
    <p v-else>请登录</p>
    <hr>
    <p>v-else-if指令</p>
    <p v-if="maPower>dalishiPower">点到为止</p>
    <p v-else-if="xiaohaiPower>maPower">不讲武德</p>
    <p v-else-if="dalishiPower == maPower">没有闪</p>
    <p v-else>窝里斗</p>
    <p>===================</p>
    <p v-if="sex == 1">男</p>
    <p v-else-if="sex == 2">女</p>
    <p v-else>保密</p>
    <hr>
    <p>v-show指令：满足条件时才会显示这个标签,通过css的操作实现显示隐藏</p>
    <p v-show="num1>num2">你好</p>
  </div>
  <!-- 1.引入vue源码 -->
  <script src="./vue.js"></script>
  <script>
    // 2.实例化，new一个 vue的实例
    let vm = new Vue({
      // 3. 选项参数，加入自己定制的参数
      // 4. el:element 挂载元素,接受的参数格式的字符串，内容是css选择器
      el: '#app', // 这个div以及他的子元素，都会受到vue的控制
      // 5. vue应用中的数据.所有的变量都应该在这里注册
      data: {
        msg: 'hello',
        msg1: '<mark>耗子尾汁</mark>',
        type1: 'password',
        type2: 'qw',
        num1: 1,
        num2: 2,
        // 登录状态
        isLogin: true,
        maPower: 50,
        xiaohaiPower: 10,
        dalishiPower: 100,
        // 1:男，2:女，0：保密
        sex: 2.55555
      }
    });
  </script>
</body>
</html>